<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" style="border-collapse: collapse;" width="400" height="300">
            <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
            </tr>
            <tr v-for="item in goodsList" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>&yen;{{item.price}}</td>
                <td>
                    <button>-</button>
                    {{item.num}}
                    <button>+</button>
                </td>
            </tr>
        </table>
        <h2>总价：{{totalPrice}}</h2>
    </div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                goodsList:[
                    {
                        id:1,
                        name:'macbook',
                        price:12999,
                        num:1
                    },
                    {
                        id:2,
                        name:'小米18',
                        price:1999,
                        num:3
                    },
                    {
                        id:3,
                        name:'阿玛尼405',
                        price:350,
                        num:2
                    }
                ]
            },
            computed:{
                totalPrice(){
                    let total = 0
                    for(item of this.goodsList) {
                        total += item.price * item.num
                    }
                    return total
                }
            }
        })
    </script>
</body>
</html>